<template>
  <div class="openDetail">
    <hr style="border: none">
    <div>
      <hr style="border: none">
      <el-form :inline="true" :model="queryForm.data" class="demo-form-inline">
        <el-form-item>
          <el-input clearable v-model="queryForm.data.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="queryForm.data.no" placeholder="工号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input clearable v-model="queryForm.data.loginName" placeholder="登录名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFormSubmit" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button size="small" type="primary" @click="$router.push({name:'sys-user-add-or-update'})" icon="el-icon-plus">添加
      </el-button>
      <el-button @click="exportAllExcel" icon="el-icon-tickets" size="small"
                 type="primary">
        导出全部
      </el-button>
      <el-button type="danger" size="small"  @click="deleteBatch" icon="el-icon-delete"
                 :disabled="this.multipleSelection.length?false:true">批量删除
      </el-button>
    </div>
    <hr>
    <div>
      <el-table :data="tableData" v-loading="loading" style="width: 100%" ref="multipleTable"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="名称" prop="name">
          <template slot-scope="scope">
            <a @click="$router.push({name:'sys-user-detail',params:{id:scope.row.id}})">{{scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column label="登录名" prop="loginName" ></el-table-column>
        <el-table-column label="邮箱" prop="email" width="200" ></el-table-column>
        <el-table-column label="电话" prop="phone" ></el-table-column>
        <el-table-column label="手机" prop="mobile" ></el-table-column>
        <el-table-column label="创建时间" prop="createDate" ></el-table-column>
        <el-table-column label="操作" fixed="right" width="500" prop="id" >
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="$router.push({name:'sys-user-detail',params:{id:scope.row.id}})"
                       icon="el-icon-edit">详细信息
            </el-button>
            <el-button size="small" type="primary" @click="resetPwd(scope.row)"
                       icon="el-icon-edit">重置密码
            </el-button>
            <el-button size="small" type="primary" @click="$router.push({name:'sys-user-add-or-update',params:{id:scope.row.id}})"
                       icon="el-icon-edit">编辑
            </el-button>
            <el-button size="small" type="danger" @click="deleteItem(scope.row)"
                       icon="el-icon-delete">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pages.currentPage" :page-sizes="pages.pageSizeList"
                     :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total"
                     prev-text="上一页"
                     next-text="下一页" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import Vue from 'vue'
  export default {
    data () {
      return {
        loading: false,
        dialogLoading:false,
        url: {
          queryPage: '/sysUser/query/page',
          delete: '/sysUser/delete',
          resetPwd: '/sysUser/admin/resetpwd',
          deleteBatch: '/sysUser/deleteBatch'
        },
        pages: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
          pageSizeList: [20, 40, 100]
        },
        tableData: [],
        queryForm: {
          dialogFormVisible: false,
          data: {
            currentPage: 1,
            pageSize: 10,
            loginName: '',
            name: '',
            no: ''
          }
        },
        multipleSelection: []
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = []
        val.forEach(item => {
          this.multipleSelection.push(item.id)
        })
      },
      handleSizeChange: function (val) {
        this.pages.pageSize = val
        this.queryFormSubmit()
      },
      handleCurrentChange: function (val) {
        this.pages.currentPage = val
        this.queryFormSubmit()
      },
      deleteBatch () {
        this.$confirm('此操作将删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.$http.adornUrl(this.url.deleteBatch), {params: {ids: this.multipleSelection.join(',')}}).then(
            () => {
              this.$message({
                type: 'success',
                message: '删除成功!',
                duration: 1500,
                onClose: () => {
                  this.queryFormSubmit()
                }
              })
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      queryFormSubmit: function () {
        this.loading = true
        this.queryForm.data.currentPage = this.pages.currentPage
        this.queryForm.data.pageSize = this.pages.pageSize
        this.$http.get(this.$http.adornUrl(this.url.queryPage), {params: this.queryForm.data}).then(({data}) => {
          this.loading = false
          this.tableData = data.list
          console.log(this.tableData, 'tableData')
          this.pages.total = data.total
        })
      },
      resetPwd: function (row) {
        this.$confirm('此操作将重置' + row.name + '的密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.$http.adornUrl(this.url.resetPwd), {params: {userId: row.id}}).then(() => {
            this.$message({
              type: 'success',
              message: '重置成功!'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      deleteItem: function (index, row) {
        this.$confirm('此操作将删除' + row.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.get(this.$http.adornUrl(this.url.delete), {params: {id: row.id}}).then((data) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 1500,
              onClose: () => {
                this.queryFormSubmit()
              }
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      exportAllExcel () {
        console.log('token : ' + Vue.cookie.get('token'))
        // 注意请求的时候要加上{responseType:'blob'}参数
        axios({
          url: '/api/sysUser/export',
          method: 'get',
          responseType: 'blob',
          params: {
            token: Vue.cookie.get('token')
          }
        }).then(msg => {
          let url = window.URL.createObjectURL(msg.data) // 表示一个指定的file对象或Blob对象
          let a = document.createElement('a')
          document.body.appendChild(a)
          let fileName = msg.headers['content-disposition'].split(';')[1].split('=')[1]  // filename名称截取
          a.href = url
          a.download = fileName // 命名下载名称
          a.click() // 点击触发下载
          window.URL.revokeObjectURL(url)  // 下载完成进行释放
        })
      }
    },

    created: function () {
      this.queryFormSubmit()
    }
  }
</script>

<style scoped>

</style>
